<template>
	<cl-dialog
		title="选择成员"
		width="850px"
		:visible.sync="visible"
		@close="reset"
		:props="{
			top: '5vh',
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form>
			<el-row :gutter="20">
				<el-col :span="10">
					<el-form-item label="所属事业部">
						<cl-select
							v-model="biz_id"
							placeholder="请选择"
							filterable
							@change="changeBiz"
							style="width:100%"
						>
							<el-option
								v-for="item in bizList"
								:key="item.biz_id"
								:label="item.biz_name"
								:value="item.biz_id"
							/>
						</cl-select>
					</el-form-item>
				</el-col>
				<el-col />
				<el-col :span="10" class="left-box">
					<el-card shadow="never" :body-style="{ padding: 0 }">
						<template #header>
							<div class="left-box__header">
								<div class="title">
									员工
									<span class="tip">
										&nbsp;({{ leftCheckVal.length }}/{{ leftList.length }})
									</span>
								</div>
								<div class="search">
									<el-input
										placeholder="搜索员工"
										prefix-icon="el-icon-search"
										v-model="leftKeyword"
										@input="onSearch"
										clearable
									/>
								</div>
							</div>
						</template>
						<div
							class="left-box__list"
							v-infinite-scroll="getList"
							:infinite-scroll-distance="100"
							:infinite-scroll-disabled="disabled"
						>
							<el-checkbox-group v-model="leftCheckVal">
								<el-checkbox
									v-for="item in leftList"
									:key="item.user_id"
									:label="item.user_id"
									:title="`${item.user_name}(${item.biz_name})`"
								>
									{{ item.user_name }}
									<span class="tips">({{ item.biz_name }})</span>
								</el-checkbox>
							</el-checkbox-group>
							<cl-empty v-if="!leftList.length && noMore" />
							<div class="tip ma-1" v-if="loading">
								<i class="el-icon-loading" />
								加载中...
							</div>
							<div class="tip ma-1" v-if="leftList.length && noMore">没有更多了</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="4" class="flex-column center-box">
					<el-button type="primary" :disabled="!rightCheckVal.length" @click="toLeft">
						<i class="el-icon-arrow-left" />
						到左边({{ rightCheckVal.length }})
					</el-button>
					<el-button type="primary" :disabled="!leftCheckVal.length" @click="toRight">
						到右边({{ leftCheckVal.length }})
						<i class="el-icon-arrow-right" />
					</el-button>
				</el-col>
				<el-col :span="10" class="right-box">
					<el-card shadow="never" :body-style="{ padding: 0 }">
						<template #header>
							<div class="right-box__header">
								<div class="title">
									已选
									<span class="tip">
										&nbsp;({{ rightCheckVal.length }}/{{ rightList.length }})
									</span>
								</div>
								<div class="search">
									<el-input
										placeholder="搜索员工"
										prefix-icon="el-icon-search"
										v-model="rightKeyword"
										clearable
									/>
								</div>
							</div>
						</template>
						<div class="right-box__list">
							<el-checkbox-group v-model="rightCheckVal">
								<el-checkbox
									v-for="item in filterRightList"
									:key="item.user_id"
									:label="item.user_id"
									:title="`${item.user_name}(${item.biz_name})`"
								>
									{{ item.user_name }}
									<span class="tips">({{ item.biz_name }})</span>
								</el-checkbox>
							</el-checkbox-group>
							<cl-empty
								v-if="!rightList.length && !rightKeyword"
								tips="请从左侧选择成员到右侧"
							/>
							<cl-empty v-if="!filterRightList.length && rightKeyword" />
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-form>

		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="save">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import { debounce } from "cl-admin/utils";
export default {
	props: {
		checkedList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			visible: false,
			biz_id: 0,
			page: 1,
			limit: 50,
			leftList: [],
			rightList: [...this.checkedList],
			leftCheckVal: [],
			rightCheckVal: [],
			leftKeyword: "",
			rightKeyword: "",
			loading: false,
			noMore: false
		};
	},
	computed: {
		disabled() {
			if (!this.visible) return true;
			return this.loading || this.noMore;
		},
		checkedIds() {
			return this.checkedList.map(v => v.user_id);
		},
		checkedRightIds() {
			return this.rightList.map(v => v.user_id);
		},
		filterRightList() {
			return this.rightList.filter(v => {
				return (
					v.user_name?.includes?.(this.rightKeyword) ||
					v.mobile?.includes?.(this.rightKeyword)
				);
			});
		}
	},
	watch: {
		visible(v) {
			!v && this.reset();
		},
		checkedIds() {
			this.rightList = [...this.checkedList];
		}
	},
	created() {
		this.getDebounceList = debounce(() => this.getList(), 300);
	},
	methods: {
		open() {
			this.biz_id = this.getCurrBiz(true);
			this.visible = true;
		},
		reset() {
			this.leftList = [];
			this.leftCheckVal = [];
			this.rightCheckVal = [];
			this.page = 1;
			this.leftKeyword = "";
			this.rightKeyword = "";
			this.noMore = false;
			this.rightList = [...this.checkedList];
		},
		save() {
			this.$emit("update:checkedList", this.rightList);
			this.$emit("save", this.rightList);
			this.visible = false;
		},
		changeBiz() {
			this.onSearch();
		},
		toLeft() {
			const { rightCheckVal } = this;
			let rightList = this.rightList.filter(v => !rightCheckVal.includes(v.user_id));
			let leftList = this.rightList.filter(
				v => v.biz_id == this.biz_id && rightCheckVal.includes(v.user_id)
			);
			this.rightList = rightList;
			this.leftList.push(...leftList);
			this.rightCheckVal = [];
		},
		toRight() {
			const { leftCheckVal } = this;
			let leftList = this.leftList.filter(
				v => v.biz_id == this.biz_id && !leftCheckVal.includes(v.user_id)
			);
			let rightList = this.leftList.filter(v => leftCheckVal.includes(v.user_id));
			this.leftList = leftList;
			this.rightList.push(...rightList);
			this.leftCheckVal = [];
		},
		async onSearch() {
			this.leftList = [];
			this.leftCheckVal = [];
			this.page = 1;
			this.noMore = false;
			await this.getDebounceList();
		},
		async getList() {
			let query = {
				page: this.page,
				page_size: this.limit,
				biz_id: this.biz_id,
				keyword: this.leftKeyword,
				status: 1
			};
			this.loading = true;
			let { data } = await this.$service.user.list(query).finally(() => {
				this.loading = false;
			});
			this.page++;
			this.noMore = data.length < this.limit;
			if (query.page == 1) {
				this.leftList = [];
			}
			let list = (data ?? [])
				.filter(v => !this.checkedRightIds.includes(v.user_id))
				.map(v => ({
					user_id: v.user_id,
					user_name: v.user_name,
					mobile: v.mobile,
					biz_id: v.biz_id,
					biz_name: v.biz_name,
					dept_id: v.dept_id,
					dept_name: v.dept_name
				}));
			this.leftList.push(...list);
		}
	}
};
</script>
<style lang="scss" scoped>
.left-box,
.right-box {
	::v-deep .el-card__header {
		padding: 0;
	}
	&__header {
		height: 80px;
		.title,
		.search {
			padding: 0 10px;
		}
		.title {
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #ebeef5;
			box-sizing: border-box;
			background: #f5f7fa;
		}
		.search {
			height: 50px;
			line-height: 50px;
		}
	}
	&__list {
		height: 400px;
		overflow: auto;
		.el-checkbox {
			margin: 10px;
		}
	}
}
.center-box {
	height: 480px;
	justify-content: center;
	align-items: center;
	::v-deep .el-button {
		margin: 5px 0;
	}
}
.tip {
	color: #c0c0c0;
	text-align: center;
	font-size: 12px;
}
</style>
